<template>
  <view>
    <view class="order-list">
      <view
        class="order-card"
        :key="index"
        style="position: relative"
        v-for="(item, index) in list"
      >
        <view
          style="
            display: flex;
            width: 100%;
            justify-content: flex-start;
            align-items: center;
          "
        >
          <view
            style="
              width: 35%;
              display: flex;
              align-items: center;
              justify-content: center;
            "
          >
            <u-avatar size="70" :src="item.img"></u-avatar>
          </view>
          <view style="width: 50%">
            <view class="title-and-status">
              <view class="title-left">
                <view class="title-main">
                  {{ item.nurseName }}
                </view>
                <view class="title-main">
                  {{ item.nurseSex }}
                </view>
                <view class="title-main">
                  {{ item.nurseAge }}
                </view>
                <view class="title-main">
                  {{ item.nurseNation }}
                </view>
              </view>
            </view>
            <view class="title-and-status">
              <view class="title-left">
                <view class="title-main">
                  {{ item.nurseSkill }}
                </view>
                <view class="title-main">
                  {{ item.nurseWork }}
                </view>
              </view>
            </view>
            <view class="title-and-status" v-if="item.nursePhone">
              <view class="title-left">
                <view class="title-main">
                  {{ item.nursePhone }}
                </view>
              </view>
            </view>
            <view class="cycle-and-price">
              <view class="cycle">{{ item.nurseAddress }}</view>
            </view>
          </view>
          <view class="nurse-status">
            <u-tag
              v-if="item.nurseState == 1"
              :text="item.state"
              plain
              size="mini"
              type="warning"
            ></u-tag>
            <u-tag
              v-else
              :text="item.state"
              plain
              size="mini"
              type="success"
            ></u-tag>
          </view>
        </view>
        <view class="div-line" />
        <view class="service-btn">
          <view
            class="my-btn"
            v-if="item.nurseState == 0"
            @click="chooseWorker(item)"
            >选择</view
          >
        </view>
      </view>
    </view>
    <uni-load-more :status="status"></uni-load-more>
  </view>
</template>

<script>
import {
  workerList,
  addWorker,
  delWorker,
  editWorker,
  getWorkerById,
} from "../../common/api/index.js";
import PageInfo from "../../utils/pageutils";
import config from "../../common/config.js";
export default {
  props: {
    isInIndex: false,
  },
  components: {},
  data() {
    return {
      tabs: ["全部", "待支付", "服务中", "已完成", "已取消"],
      current: 0,
      showPop: false,
      status: "",
      orderStatus: "全部", //支付状态
      status: "", //状态
      readForm: {},
      formTitle: "添加被护理人",
      modelForm: {
        nurseInfo: {
          nurseName: "",
        },
      },
      form: {},
      rules: {
        "userInfo.nurseName": {
          type: "string",
          required: true,
          message: "请填写姓名",
          trigger: ["blur", "change"],
        },
        "userInfo.nurseSex": {
          type: "string",
          max: 1,
          required: true,
          message: "请选择男或女",
          trigger: ["blur", "change"],
        },
      },
      list: [],
      pageInfo: new PageInfo(),
      showSex: false, //性别选择
      sexActions: [
        {
          name: "男",
        },
        {
          name: "女",
        },
      ],
      showOver: false,
      fileList: [],
    };
  },
  computed: {},
  mounted() {
    console.log("mounted");
    this.refresh();
  },
  onLoad() {
    this.getList();
  },
  onPullDownRefresh() {
    this.refresh();
  },
  onReachBottom() {
    this.loadMore();
  },

  methods: {
    // 列表
    getList() {
      let userId = uni.getStorageSync("USER_ID");
      workerList({
        pageIndex: this.pageInfo.pageIndex,
        pageSize: this.pageInfo.pageSize,
      }).then((result) => {
        console.log("result", result);
        const list =
          result.data.rows.map((item) => {
            return {
              ...item,
              img: config.cloudBaseurl + item.nurseImage,
            };
          }) || [];
        const total = result.data.total;
        this.list = [...this.list, ...list];
        console.log("list", list);

        this.pageInfo.total = total;
        this.pageInfo.loadedTotal = this.list.length;
        setTimeout(() => {
          if (this.pageInfo.isNotLoadAll) {
            this.status = "more";
          } else {
            this.status = "noMore";
          }
          uni.stopPullDownRefresh();
        }, 200);
      });
    },
    // 刷新
    refresh() {
      this.pageInfo.reset();
      this.list = [];
      this.status = "loading";
      this.getList();
    },
    // 加载更多
    loadMore() {
      if (this.pageInfo.isNotLoadAll) {
        this.status = "loading";
        this.pageInfo.nextPage();
        this.getList();
      } else {
        this.status = "noMore";
      }
    },
    // 选择
    chooseWorker(item) {
      console.log("item", item);
      this.$store.commit("page/setPageInfo", {
        chooseWorker: true,
        chooseWorkerInfo: item,
      });
      uni.navigateBack();
    },
  },
};
</script>
<style>
page {
  background-color: #f5f5f5;
}
</style>
<style lang="scss" scoped>
page {
  background: #f9f9f9;
}

.main-container {
  display: flex;
  flex-direction: column;
}

.top-tab-bar {
  padding: 20rpx 30rpx;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(auto-fit, 150rpx);
  grid-template-rows: repeat(auto-fit, 66rpx);
  grid-column-gap: 20rpx;
  grid-row-gap: 26rpx;
  background: #f9f9f9;

  // position: sticky;
  // top: 0;
  // z-index: 2;
  .tab-item {
    width: 150rpx;
    height: 66rpx;
    background: #f1f1f1;
    border-radius: 32rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(35, 35, 35, 0.8);
    font-size: 26rpx;
  }

  .tab-item-selected {
    background: #dff0ef;
    color: #0bc5ae;
  }
}

.order-card {
  margin-right: 30rpx;
  margin-left: 30rpx;
  background: white;
  padding: 30rpx;
  box-sizing: border-box;
  border-radius: 16rpx;
  margin-top: 20rpx;
  display: flex;
  flex-direction: column;

  .title-and-status {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 10rpx 0;

    .title-left {
      display: flex;
      justify-content: flex-start;
      // width: 50%;
      align-items: flex-end;

      .title-main {
        color: #333333;
        font-size: 26rpx;
        font-weight: 700;
        margin-right: 30rpx;
      }

      .subhead {
        color: #747474;
        font-size: 28rpx;
      }
    }

    .time {
      flex: 1;
      color: rgba(35, 35, 35, 0.7);
      font-size: 26rpx;
    }

    .status {
      font-size: 30rpx;
      color: #747474;
    }
  }

  .item-tag {
    display: flex;
    justify-content: flex-start;
    // width: 80%;
    align-items: center;
    margin-top: 20rpx;
    flex-wrap: wrap;

    .service-tag {
      width: 110rpx;
      background-color: #eafaf5;
      font-size: 20rpx;
      color: #6f7070;
      padding: 5rpx;
      height: 50rpx;
      line-height: 50rpx;
      text-align: center;
      border-radius: 25rpx;
      margin-right: 10rpx;
      margin-bottom: 10rpx;
    }
  }

  .cycle-and-price {
    display: flex;
    justify-content: space-between;
    font-size: 25rpx;
    color: #6c6c6c;
    margin-top: 10rpx;

    .cycle {
      width: 80%;
    }

    .price {
    }
  }

  .project-row {
    display: flex;
    align-items: center;
    margin-top: 36rpx;

    .img {
      width: 136rpx;
      height: 136rpx;
      border-radius: 20rpx;
    }

    .name {
      color: #232323;
      font-size: 32rpx;
      font-weight: bold;
      margin-left: 24rpx;
    }
  }

  .info-row {
    display: flex;
    margin-top: 40rpx;

    .name {
      width: 136rpx;
      color: rgba(35, 35, 35, 0.7);
      font-size: 26rpx;
    }

    .value {
      color: #232323;
      font-size: 26rpx;
    }
  }

  .div-line {
    width: 100%;
    height: 2rpx;
    background: #f8f8f8;
    margin-top: 40rpx;
  }

  .price-and-pay {
    display: flex;
    align-items: center;
    margin-top: 20rpx;

    .left {
      display: flex;
      align-items: center;
      flex: 1;
    }

    .cancel-btn {
      width: 150rpx;
      height: 60rpx;
      border: solid 2rpx rgba(35, 35, 35, 0.26);
      border-radius: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(35, 35, 35, 0.8);
      font-size: 26rpx;
      margin-left: 8rpx;
      margin-right: 8rpx;
    }

    .ok-btn {
      width: 150rpx;
      height: 60rpx;
      border: solid 2rpx #0bc5ae;
      border-radius: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #0bc5ae;
      font-size: 26rpx;
      margin-left: 8rpx;
      margin-right: 8rpx;
    }
  }
}

.del-btn {
  width: 60rpx;
  height: 40rpx;
  border: solid 2rpx #c5070a;
  border-radius: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c5070a;
  font-size: 14rpx;
  margin-left: 8rpx;
  margin-right: 8rpx;
}

.service-btn {
  display: flex;
  justify-content: flex-end;
  margin-top: 20rpx;
  flex-wrap: wrap;
}

.service-btn .my-btn:not(:last-child) {
  margin-right: 10rpx;
}

.my-btn {
  min-width: 140rpx;
  height: 58rpx;
  line-height: 58rpx;
  border: 1rpx solid #d0d0d0;
  border-radius: 40rpx;
  color: #787878;
  text-align: center;
}

.btn-green {
  border-color: #04bdb3;
  color: #04bdb3;
}

.addPatient {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 30rpx;
}

.service-popup-view {
  width: 100%;
  background: white;
  padding: 40rpx;
  box-sizing: border-box;
  border-top-left-radius: 24rpx;
  border-top-right-radius: 24rpx;
  display: flex;
  flex-direction: column;
  position: relative;
  .title-view {
    position: relative;
    display: flex;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10rpx 0;

    .title {
      color: #232323;
      font-size: 32rpx;
      font-weight: bold;
    }

    .close-btn-view {
      width: 80rpx;
      height: 80rpx;
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      right: 0;

      .close-btn {
        width: 36rpx;
        height: 36rpx;
      }
    }
  }

  scroll-view {
    width: 100%;
    height: 70vh;
  }

  .item {
    width: 100%;
    display: flex;
    align-items: center;
    border-bottom: solid 2rpx #f8f8f8;
    padding-top: 36rpx;
    padding-bottom: 36rpx;

    .left-view {
      image {
        width: 120rpx;
        height: 120rpx;
        border-radius: 20rpx;
      }
    }

    .right-view {
      flex: 1;
      margin-left: 10rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-around;

      .name-view {
        display: flex;
        color: #232323;
        font-size: 30rpx;
        font-weight: bold;
      }

      .adder-view {
        color: rgba(35, 35, 35, 0.5);
        font-size: 24rpx;
      }
    }
  }
}

.form-item-row {
  width: 100%;
  min-height: 120rpx;
  padding-left: 30rpx;
  padding-right: 30rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .label {
    color: #232323;
    font-size: 32rpx;
    white-space: nowrap;
  }

  .small-label {
    color: #232323;
    font-size: 32rpx;
  }

  .required-label::after {
    content: "*";
    color: #e74242;
    font-size: 30rpx;
    margin-left: 4rpx;
  }

  .selector-text {
    color: #232323;
  }

  input {
    text-align: end;
  }
}

.save-btn {
  width: 100%;
  height: 88rpx;
  background: #0bc5ae;
  border-radius: 48rpx;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30rpx;
}

.bottom-view {
  width: 100%;
  padding: 30rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  // position: absolute;
  // bottom: 0;
}
</style>
